<!DOCTYPE html>
<html lang="zh-cmn-Hans"  xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/layui/css/layui.css"  media="all">
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <script th:inline="javascript">
        $(function(){
            document.getElementById('reportdiv').style.display='block';
            document.getElementById('checkdiv').style.display='none';//设置刚进入的时候什么都不显示，即主页
            document.getElementById('infodiv').style.display='none';

            $("#reportdd").on("click", function() {//点击商品表隐藏其他两个表
                document.getElementById('reportdiv').style.display='block';
                document.getElementById('checkdiv').style.display='none';
                document.getElementById('infodiv').style.display='none';
            })
            $("#checkdd").on("click", function() {
                document.getElementById('reportdiv').style.display='none';
                document.getElementById('checkdiv').style.display='block';
                document.getElementById('infodiv').style.display='none';
            })
            $("#infodd").on("click", function() {
                document.getElementById('reportdiv').style.display='none';
                document.getElementById('checkdiv').style.display='none';
                document.getElementById('infodiv').style.display='block';
            })
        })
    </script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">宿舍管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../../static/images/touxiang.jpg" class="layui-nav-img">
                    张三
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
                <li class="layui-nav-item">
                    <a class="" href="photo">安全保障</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="videodd">视频监控</a></dd>
                        <dd><a href="javascript:;" id="shidudd">湿度监控</a></dd>
                        <dd><a href="javascript:;" id="doordd">门监控</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="sleep">定时查寝</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="reportdd">报寝</a></dd>
                        <dd><a href="javascript:;" id="checkdd">信息查看</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">用户信息维护</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="infodd">用户信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">生活休闲</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">饮水机管理</a></dd>
                        <dd><a href="javascript:;">宠物喂食</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body" style="left: 200px">
        <div id = "reportdiv" style="padding: 15px;">
            <img src="../../static/images/map.jpg" width="800" height="500" align="center" name="map">
            <img src="../../static/images/loading.gif" width="800" height="500" align="center" name="loading_map">


            <input type="text" placeholder="点击获取位置" autocomplete="off" name="position_now" class="layui-input" readonly="true"
               lay-verify="required" onclick="upload()">

            <button name="sub_btn" type="button" class="layui-btn" id="test1" onclick="sub_info()">点击打卡</button>

        </div>
        <div id = "checkdiv" style="padding: 15px;">
            这里放信息查看
        </div>
        <div id = "infodiv" style="padding: 15px;">
            <table class="layui-hide" id="sleepCheck" lay-filter="test" ></table>
        </div>
    </div>

<script>
    var e = 1;

    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }


    function upload() {
        var info = "湖南省 长沙市  湖南省长沙市天心区文源街道";

        $("[name='position_now']").val(info)

        $("[name='loading_map']").show();

        sleep(3000)

        $("[name='loading_map']").hide();

        $("[name='map']").show();
        $("[name='sub_btn']").show();
    }

    $("[name='map']").hide();
    {#$("[name='loading_map']").hide();#}
    $("[name='sub_btn']").hide();

    function sub_info(){
        if(e==1){
            alert("打卡成功")
            e=0;
        }
        else
            alert("亲~，您已经打过卡了")
    }

</script>

<script type="text/javascript" th:inline="none">
    layui.use(['table'], function () {
        var table = layui.table;
        table.render({
            elem: '#sleepCheck'
            ,toolbar:"#toolbarAccount"
            ,cellMinWidth: 80
            ,page:true
            ,parseData: function (res) {
                return {
                    "code": 0
                    ,"msg": "暂无数据"
                    , "data": res
                };
            }
            ,cols: [[
                {field:'num', title: '序号',type:"numbers"}
                ,{field:'username', title: '用户名', sort: true}
                ,{field:'number', title: '学号', sort: true,edit:'text'}
                ,{field:'location', title: '地点',edit:'text'}
                ,{field:'time', title: '时间',edit:'text'}
            ]]
            ,data:{"code":0,"msg":"","count":1000,
             "data":[{"num":1,"username":"j2ee","number":"8209190166","location":"湖南省长沙市铁道学院铁二舍",
                      "time":"2021-5-10 19:10:10","experience":255},
                     {"num": 2, "username": "j2ee1", "number": "8209190165", "location": "湖南省长沙市铁道学院铁二舍",
                      "time": "2021-5-10 19:10:12", "experience": 255},
             ]}
        });

    })
</script>

    <script type="text/html" id="orderBar">
        <input type="button" class="layui-btn layui-btn-sm" lay-event="increaseItem" value="提醒">
    </script>
</div>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});
</script>
</body>
</html>